<html id="laszlo_basics" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Laszlo Basics</title>
</head>

<body>

<h1>Laszlo Basics</h1>

<todo>
explain how tutorials relate to laszlo in ten minutes
</todo>
<todo>
Rename this tutorial
</todo>
<todo>
Mention components and how to build apps by accreting components.
</todo>
<h2>Building a simple Laszlo application</h2>


<!--
 If not, please read the <a href="http://www.laszlosystems.com/developers/documentation/installation-v1/" target="_blank">installation instructions</a>.</p>
-->

<p>The source code to a Laszlo application is a set of XML files, and
media asset files (such as image, sound, and font files).  Each
application has a <dfn>canvas file</dfn>, which is an XML file that
contains the <tagname>canvas</tagname> tag.</p>

<!-- The canvas file is  <glossterm>LZX files</glossterm>, which contain tags in the LZX tag set.  (These tags are listed in the <a href="${reference}">Reference</a>.) -->

<p>By convention, LZX files end with the extension <code>.lzx</code>.
Every LZX file is an XML file, so if your editor has an XML mode, set
it to that for working with LZX files.</p>


<p>The enclosing tag of every Laszlo application is the <tagname>canvas</tagname> tag.
The canvas is a view (like every other displayable object on the screen) but it
has some special properties. For instance, resources can't be attached directly
to the canvas. </p>



<p>Here is a simple lzx file:</p>


<example title="Empty Canvas">
&lt;canvas width="500" height="150" bgcolor="green"&gt;
&lt;/canvas&gt;
</example>



<p>For this simple example we have set the background color to green, just to show that it's there.  If you don't set a background color for the
canvas it will be rendered white.  (Throughout the rest of this tutorial no background color will be specified for the canvas.) Now let's
put a window on a white canvas. 
</p>


<example title="Simple window">
&lt;canvas width="500" height="150"&gt;
  &lt;window/&gt;
&lt;/canvas&gt;
</example>

<p>Note the XML 
empty tag format we're using: <tagname>window</tagname>.</p>
<p> Using the
attributes of that window, let's customize it a bit. Just as in HTML, 
Laszlo tags can have attributes:</p>

<example title="Specifying window size">
&lt;canvas width="500" height="300"&gt;
  &lt;window x=&quot;20&quot; y=&quot;20&quot; width=&quot;200&quot; height=&quot;250&quot;/&gt;
&lt;/canvas&gt;
</example>

<p>In these simple examples, all measurements are in <i>pixels</i>. (A later <xref linkend="views">chapter</xref> explains how units
of measurement may vary in more complicated situations.)
</p>
<p> Notice how the window is now <i>absolutely</i>
positioned relative to the top-left corner of the browser.</p>


<example title="Window Title">
&lt;canvas width="500" height="350"&gt;
  &lt;window x=&quot;20&quot; y=&quot;20&quot; width=&quot;200&quot; height=&quot;250&quot; 
          title=&quot;Simple Window&quot; resizable=&quot;true&quot; /&gt;
&lt;/canvas&gt;
</example>

<p>Now we've got a window, which both has a title, and can be resized.</p>
<p>Notice how we're breaking the code up across lines to keep it neat? </p>
<p>Let's stick something in that window. </p>

<example title="Window Text">
&lt;canvas width="500" height="350"&gt;
  &lt;window x="20" y="20" width="200" height="250" 
          title="Simple Window" resizable="true"&gt;
    &lt;text&gt;Here is some text.&lt;/text&gt;
  &lt;/window&gt;
&lt;/canvas&gt;
</example>

<p>We've given the <tagname>window</tagname> element a child (<code>text</code>), which contains the text we want written out. </p>
<p>Notice how the text gets put in the top-left hand corner. </p>
<p>Suppose we want to add another line of text? Why not just add another text tag, below the existing one:</p>

<example title="Overlapping text fields">
&lt;canvas width="500" height="350"&gt;
  &lt;window x="20" y="20" width="200" height="250" 
          title="Simple Window" resizable="true"&gt;
    &lt;text&gt;Here is some text.&lt;/text&gt;
    &lt;text&gt;I could ramble for hours.&lt;/text&gt;
  &lt;/window&gt;
&lt;/canvas&gt;
</example>

<p>Eugh! The two text fields are sitting on top of each other. That's because the default place to put content
is in the top-left hand corner. To correct this, we could position both text elements <i>absolutely</i>, as we did 
with the window:</p>

<example title="Manually positioning text">
&lt;canvas width="500" height="250"&gt;
  &lt;window x="20" y="20" width="200" height="250" 
          title="Simple Window" resizable="true"&gt;
    &lt;text <em>x="10" y="10"</em>&gt;Here is some text.&lt;/text&gt;
    &lt;text <em>x="10" y="50"</em>&gt;I could ramble for hours.&lt;/text&gt;
  &lt;/window&gt;
&lt;/canvas&gt;
</example>

<p>Notice how the text is now positioned <i>relative to its parent element</i>, the <tagname>window</tagname>.</p>
<p>This worked great, and is extremely useful for positioning elements all over the place. 
But it's not very elegant when you think about the way elements flow relative to each other.</p>
<p>Laszlo provides a solution to this:</p>

<example title="Simplelayout">
&lt;canvas width="500" height="350"&gt;
  &lt;window x="20" y="20" width="200" height="250" 
          title="Simple Window" resizable="true"&gt;
    <em>&lt;simplelayout axis="y" spacing="10" /&gt;</em>
    &lt;text&gt;Here is some text.&lt;/text&gt;
    &lt;text&gt;I could ramble for hours.&lt;/text&gt;
  &lt;/window&gt;
&lt;/canvas&gt;
</example>

<p>Now the first text field is positioned relative to the second. The <tagname>simplelayout</tagname>
tag tells Laszlo that everything in that <i>view</i> (in this case the <tagname>window</tagname>) 
will be positioned relative to its siblings. Here, the <code>axis</code> property makes
everything align vertically, and the <code>spacing</code> specifies how far apart the
elements should be.</p>

<p>But what is a view? For more on that, move on to the "Understanding Views" tutorial.</p>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
